<template>
  <div class="user d-flex fl-col jc-between ">
    <div class="header mb-3">
      
   <div class="bg">
      <div class="me d-flex ai-center jc-between">
        <div class="icon">
          <el-upload
  class="avatar-uploader"
  :action="$http.defaults.baseURL + '/upload'"
  :show-file-list="false"
  :headers="getAuthHeader()"
  :on-success="afterUpload"
  >
  <img v-if="model.avatar" :src="model.avatar" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
        </div>
      <div class="name fs-20 text-white px-3">{{username}}</div>
      </div>
      <div class="mess d-flex jc-around p-3">
        <div class="mess-item d-flex fl-col ai-center">
          <span class="num mb-3">{{myscore}}</span>
          <span class="tip">最近得分</span>
        </div>
          <div class="mess-item d-flex fl-col ai-center">
          <span class="num mb-3">{{num}}</span>
          <span class="tip"> 考试场数</span>
        </div>
          <div class="mess-item d-flex fl-col ai-center">
          <span class="num mb-3">{{totalscore}}</span>
          <span class="tip">待批改</span>
        </div>
      </div>
      </div>
    </div>
    <div class="main p-3">
      <router-link tag="div" :to="`/mytest/${username}`" class="main-item p-2 d-flex jc-between ai-center  ">
        <span class="iconfont icon-kaoshi mr-2"></span>
        <span class=" flex-1 ">我参加的考试</span>
        <span class="iconfont icon-jiantou"></span>
        </router-link>
      <div class="main-item p-2 d-flex jc-between ai-center">
        <span class="iconfont icon-gonggao mr-2 "></span>
        <span class=" flex-1 ">公告</span>
        <span class="iconfont icon-jiantou"></span>
        </div>
      <div class="main-item p-2 d-flex jc-between ai-center">
        <span class="iconfont icon-guanyuwomen mr-2"></span>
        <span class=" flex-1 ">关于我们</span>
        <span class="iconfont icon-jiantou"></span>
        </div>
    </div>

    <div class="botNav d-flex jc-around ai-center">
        <router-link tag="div" to="/main" class="tohome d-flex fl-col jc-center ai-center">
          <span class="iconfont icon-home mb-1"></span>
          <span>首页</span>
        </router-link>
       <router-link tag="div" :to="{path: `/user/${username}`,query: {user: this.$route.query.user}}"  class="touser d-flex fl-col jc-center ai-center">
          <span class="iconfont icon-user mb-1"></span>
          <span>个人中心</span>
        </router-link>
      </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      model: {

      },
      username: '',
      num: '',
      totalscore: '',
      myscore:'',
    }
  },
methods: {
   afterUpload(res) {
  this.$set(this.model, 'avatar', res.url)
  },
  async fetch() {
     this.username = window.sessionStorage.getItem('username')
    const res = await this.$http.get(`/user/${this.username}`)
    res.data.forEach(ele => {
       this.myscore = ele.score
       this.totalscore = ele.totalscore

    });

    this.num = res.data.length
    //  const re = await this.$http.get(`/mytest`)
    // this.num = re.data.length

    //  const r = await this.$http.get(`/myquestions`)
    //   r.data.forEach(ele => {
    //       this.score =  ele.totalscore
    //  });
    //  const ress = await this.$http.get(`/test`)
    //   ress.data.forEach(ele => {
    //     this.totalscore = ele.totalScore
    //   })

  }
},

created() {
  this.fetch()
},
}
</script>

<style>
.avatar-uploader {
  width: 60px;
  height: 60px;
  border-radius: 30px;
} 
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
  
</style>